<template>
  <div class="big-p">
    <div class="top_box">
      <el-row>
        <el-col :span="12">
          <div class="dpib" style="padding: 0 10px">
            <el-avatar
              style="width: 100px; height: 100px"
              size="large"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
            <el-tag type="success" class="tag_sty" size="small"
              >人员状态：正常</el-tag
            >
          </div>
          <div class="dpib vat mr20">
            <p>
              <span class="fz20 fw700 mr10" style="color: #000">熊志先</span>
              <span>女</span>
              <el-divider direction="vertical"></el-divider>
              <span>60岁</span>
              <el-divider direction="vertical"></el-divider>
              <span>血型：A型</span>
            </p>
            <p>
              <el-tag type="danger" class="mr5 mt10" size="small"
                >高血压</el-tag
              >
              <el-tag type="danger" class="mr5 mt10" size="small"
                >糖尿病</el-tag
              >
            </p>
          </div>
          <div class="dpib vat">
            <p class="mb2">证件类型：身份证</p>
            <p class="mb2">证件号码：533221196405082742</p>
            <p class="mb2">手机号码：18213102338</p>
            <p class="mb2 singe-line" style="width: 350px">
              户籍地址：云南省丽江市玉龙纳西族自治县黎明傈僳族乡黎明村委会
            </p>
            <p class="singe-line" style="width: 350px">
              现住址：云南省丽江市玉龙纳西族自治县黎明傈僳族乡黎明村委会
            </p>
          </div>
        </el-col>
        <el-col :span="6" class="center_box" style="padding: 0 30px">
          <p class="mb2">健康档案编号：53072120510400023</p>
          <p class="mb2">建档时间：2021-03-07</p>
          <p class="mb2">责任医生：吴向成</p>
          <p class="mb2">责任单位：黎明村卫生室</p>
          <p>最近一次服务日期：2024-01-18</p>
        </el-col>
        <el-col :span="6" style="padding: 0 30px">
          <p class="mb2">签约时间： 2024-03-26</p>
          <p class="mb2">签约医生： 吴向成</p>
          <p class="mb2">签约单位： 黎明村卫生室</p>
          <p class="mb2">家签最近服务日期： 2022-03-14</p>
        </el-col>
      </el-row>
    </div>
    <p class="title">居民健康情况</p>
    <div class="c_box">
      <el-row>
        <el-col :span="8">
          <div class="box_item mb10">
            <p class="box_title">
              体质指数
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  体质指数（Body Mass
                  Index，BMI）是评估人体胖瘦程度最常用的指标之一。<br />关于体质指数的计算和评估标准，可以总结如下：<br />
                  BMI的计算公式为：BMI = 体重（kg） / 身高^2（m）。<br />
                  BMI数值：18.5以下，偏瘦；18.5-23.9，正常范围；24-27，过重；28-32，肥<br />胖；32以上，严重肥胖。<br />
                  BMI不是评估体脂肪的唯一标准，还需考虑年龄、性别、肌肉比例等因素。不<br />同人群的正常BMI范围也可能有所不同。高BMI通常与许多健康问题相关，如心<br />脏病、糖尿病等。但是低BMI也可能增加健康风险。应定期监测BMI，联合其他<br />指标评估体重健康状况。<br />
                  BMI不是评判个人健康或体型的唯一标准。综合来说，BMI是重要的健康参考指<br />数之一，但不应孤立使用。需要配合其他指标，并考虑个体差异，从而对身体<br />状况做出全面的评估。
                </div>
                <i class="el-icon-question ml5"></i>
              </el-tooltip>
              <el-radio-group v-model="radio3" size="small" class="flr">
                <el-radio-button label="图表"></el-radio-button>
                <el-radio-button label="表单"></el-radio-button>
              </el-radio-group>
            </p>
            <div class="box_main" v-if="radio3 == '图表'">
              <qiun-data-charts
                style="width: 100%; height: 220px"
                type="line"
                :opts="opts_tzzs"
                :chartData="chartData_tzzs"
              />
            </div>
            <div class="box_main" v-else>
              <el-table :data="tableData" style="width: 100%" height="210">
                <el-table-column prop="date" label="检查单位">
                </el-table-column>
                <el-table-column prop="name" label="检查项目">
                </el-table-column>
                <el-table-column prop="address" label="BMI"> </el-table-column>
                <el-table-column prop="address" label="检查时间">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box_item">
            <p class="box_title">
              常规检验
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  常规检验包含：血常规、尿常规、肝功、肾功、血脂五项。若一天存在多次，<br />则取最近一次检验数据；若时间相同，则取当天任意一次检查数据
                </div>
                <i class="el-icon-question ml5"></i>
              </el-tooltip>
            </p>
            <div class="box_main">
              <el-table :data="tableData" style="width: 100%" height="210">
                <el-table-column prop="date" label="检查项目">
                </el-table-column>
                <el-table-column prop="name" label="异常值"> </el-table-column>
                <el-table-column prop="address" label="报告时间">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8"
          ><div class="box_item_c" style="margin: 0 15px">
            <div style="height: 526px">
              <div class="w100" style="height: 45px">
                <span class="main_info_box fll"> 就诊次数（0次） </span>
                <span class="main_info_box flr"> 慢病：无 </span>
              </div>
              <div class="mt10 w100" style="height: 45px">
                <span class="main_info_box fll"> 会诊次数（0次） </span>
                <span class="main_info_box flr"> 转诊次数（0次） </span>
              </div>
              <div class="w100" style="height: 70px; margin-top: 210px">
                <span class="main_info_box fll">
                  <span class="valt">现病史</span><br />暂无
                </span>
                <span class="main_info_box flr">
                  <span class="valt">过敏史</span><br />无(公卫);
                </span>
              </div>
              <div class="w100" style="height: 70px">
                <span class="main_info_box fll">
                  <span class="valt">手术史</span><br />暂无
                </span>
                <span class="main_info_box flr">
                  <span class="valt">既往史</span><br />无(公卫);
                </span>
              </div>
              <div class="mt10 w100 flex_div" style="height: 45px">
                <span class="main_info_box2 fll">
                  <span class="valt">165.0</span> <br />
                  身高cm
                </span>
                <span class="main_info_box2 fll">
                  <span class="valt">165.0</span> <br />
                  体重kg
                </span>
                <span class="main_info_box2 fll">
                  <span class="valt">24.24</span> <br />
                  BMI
                </span>
                <span class="main_info_box2 fll">
                  <span class="valt">120/82</span> <br />
                  血压mmHg
                </span>
                <span class="main_info_box2 fll">
                  <span class="valt">暂无</span> <br />
                  血糖mmol/L
                </span>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="8">
          <div class="box_item mb10">
            <p class="box_title">
              血压
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  血压是指血液在血管内对血管壁施加的压力。血压通常由两个值表示：收缩压<br />
                  （Systolic Pressure）和舒张压（Diastolic
                  Pressure），以毫米汞柱（mmHg）<br />
                  为单位。以下是一般成人的血压范围值：<br />
                  正常血压：收缩压小于120 mmHg，舒张压小于80
                  mmHg，表示血压在正常健<br />
                  康范围内。<br />
                  高血压（高血压阶段1）：收缩压在130-139
                  mmHg之间，或舒张压在80-89 m <br />
                  mHg之间。这表明血压略高于正常范围，但尚未达到高血压的诊断标准。<br />
                  高血压（高血压阶段2）：收缩压在140 mmHg或更高，或舒张压在90
                  mmHg <br />
                  或更高。这表示血压明显升高，已达到高血压的诊断标准。<br />
                  低血压：一般来说，如果收缩压低于90 mmHg，或舒张压低于60
                  mmHg，被<br />
                  认为是低血压。低血压可能会引起头晕、晕厥和其他不适症状。<br />
                  需要注意的是，血压范围可以因个体差异、年龄、性别、健康状况以及其他因<br />
                  素而有所不同。血压的准确评估和诊断应该由医疗专业人员进行，如果您有任<br />
                  何关于血压的疑问或担忧，建议咨询医生或医疗专业人员。
                </div>
                <i class="el-icon-question ml5"></i>
              </el-tooltip>
              <el-radio-group v-model="radio3" size="small" class="flr">
                <el-radio-button label="图表"></el-radio-button>
                <el-radio-button label="表单"></el-radio-button>
              </el-radio-group>
            </p>
            <div class="box_main" v-if="radio3 == '图表'">
              <qiun-data-charts
                style="width: 100%; height: 220px"
                type="line"
                :opts="opts_xy"
                :chartData="chartData_xy"
              />
            </div>
            <div class="box_main" v-else>
              <el-table :data="tableData" style="width: 100%" height="210">
                <el-table-column prop="date" label="检查单位">
                </el-table-column>
                <el-table-column prop="name" label="检查项目">
                </el-table-column>
                <el-table-column prop="address" label="收缩压/舒张压">
                </el-table-column>
                <el-table-column prop="address" label="检查时间">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box_item">
            <p class="box_title">
              血糖
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  关于血糖的正常范围和指标解释如下: <br />
                  空腹血糖（FPG）：正常范围在3.9-6.1毫摩尔/升（mmol/L）。餐后2小时血糖<br />
                  （PG2h）：正常通常不超过7.8毫摩尔/升（mmol/L）。<br />
                  血糖指标：正常血糖，FPG&lt;6.1mmol/L，PG2h&lt;7.8mmol/L；空腹高血糖：FP
                  <br />
                  G≥6.1mmol/L；糖耐量受损：PG2h≥7.8 &amp;&amp;
                  &lt;11.1mmol/L；糖尿病：FPG≥7.0 <br />
                  mmol/L 或
                  PG2h≥11.1mmol/L；血糖水平受多个因素影响，正常范围可能因人<br />
                  而异。<br />
                  空腹血糖较能反映整体血糖控制状况。餐后血糖升高幅度可以评估胰岛素分泌<br />
                  和耐糖能力。血糖持续偏高会增加患糖尿病和并发症风险。定期监测血糖，并<br />
                  综合其他指标，以全面评估血糖健康状态。<br />
                  综上所述，正常血糖控制在FPG 3.9-6.1mmol/L、PG2h
                  &lt;7.8mmol/L范围。如有<br />
                  异常，应积极调整生活方式,必要时接受药物治疗。<br />
                  空腹血糖（Fasting Blood
                  Glucose）临界值：小于109.8mg/dL（6.1mmol/L）<br />
                  餐后2小时血糖（Postprandial Blood
                  Glucose）临界值：小于199.8mg/dL（11. <br />
                  1mmol/L）<br />
                  如果有随机血糖，随机血糖按照11.1mmol/L
                </div>
                <i class="el-icon-question ml5"></i>
              </el-tooltip>
              <el-radio-group v-model="radio3" size="small" class="flr">
                <el-radio-button label="图表"></el-radio-button>
                <el-radio-button label="表单"></el-radio-button>
              </el-radio-group>
            </p>
            <div class="box_main" v-if="radio3 == '图表'">
              <qiun-data-charts
                style="width: 100%; height: 220px"
                type="line"
                :opts="opts_xt"
                :chartData="chartData_xt"
              />
            </div>
            <div class="box_main" v-else>
              <el-table :data="tableData" style="width: 100%" height="210">
                <el-table-column prop="date" label="检查项目">
                </el-table-column>
                <el-table-column prop="name" label="异常值"> </el-table-column>
                <el-table-column prop="address" label="报告时间">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <p class="title" v-if="false">
      诊疗记录

      <el-tooltip class="item" effect="dark" placement="bottom">
        <div slot="content">
          1、就诊记录、检查、检验、病历、处<br />方数据截止昨日21:00<br />
          2: 会诊和转诊数据为实时数据(仅限新<br />增记录，新增居民为T+2)
        </div>
        <i class="el-icon-question ml5"></i>
      </el-tooltip>
    </p>
    <div class="top_box" v-if="false">
      <p style="color: #000; font-size: 16px">
        <span class="l_zwf"></span> 诊疗明细项
      </p>
      <ul class="zljl">
        <li class="item">
          <p class="fz20">检查</p>
          <div class="info">暂无数据</div>
        </li>
        <li class="item">
          <p class="fz20">检验</p>
          <div class="info">暂无数据</div>
        </li>
        <li class="item">
          <p class="fz20">病历</p>
          <div class="info">暂无数据</div>
        </li>
        <li class="item">
          <p class="fz20">处方</p>
          <div class="info">暂无数据</div>
        </li>
        <li class="item">
          <p class="fz20">会诊</p>
          <div class="info">暂无数据</div>
        </li>
        <li class="item">
          <p class="fz20">转诊</p>
          <div class="info">暂无数据</div>
        </li>
      </ul>
    </div>
    <div class="top_box mt10" v-if="false">
      <p style="color: #000; font-size: 16px">
        <span class="l_zwf"></span> 诊疗时间轴
      </p>
      <van-steps :active="active" active-icon="success" active-color="#07c160">
        <van-step></van-step>
        <van-step></van-step>
        <van-step></van-step>
        <van-step></van-step>
        <van-step></van-step>
      </van-steps>
      <el-empty description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
import qiunDataCharts from "@qiun/vue-ucharts";

export default {
  data() {
    return {
      radio3: "图表",
      chartData_tzzs: {},
      opts_tzzs: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 10, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          title: "时间",
          titleOffsetY: 1,
          titleOffsetX: -20,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          max: 40,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      chartData_xy: {},
      opts_xy: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 10, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          title: "时间",
          titleOffsetY: 1,
          titleOffsetX: -20,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          max: 200,
          min: 0,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      chartData_xt: {},
      opts_xt: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 10, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          title: "时间",
          titleOffsetY: 1,
          titleOffsetX: -20,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          max: 40,
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
          },
        },
      },
      tableData: [],
      active: "0",
    };
  },
  components: {
    qiunDataCharts,
  },
  mounted() {
    this.getServerData_tzzs();
    this.getServerData_xy();
    this.getServerData_xt();
  },
  methods: {
    getServerData_tzzs() {
      //模拟从服务器获取数据时的延时
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
        series: [
          {
            name: "BMI",
            data: [24.24, 24.24, 24.24, 24.24, 24.24, 24.24],
          },
        ],
      };
      this.chartData_tzzs = JSON.parse(JSON.stringify(res));
    },
    getServerData_xy() {
      //模拟从服务器获取数据时的延时
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
        series: [
          {
            name: "收缩压",
            data: [125, 120, 123, 120, 126, 124],
          },
          {
            name: "舒张压",
            data: [60, 62, 60, 66, 60, 63],
          },
        ],
      };
      this.chartData_xy = JSON.parse(JSON.stringify(res));
    },
    getServerData_xt() {
      //模拟从服务器获取数据时的延时
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: [],
        series: [
          {
            name: "血糖",
            data: [],
          },
        ],
      };
      this.chartData_xt = JSON.parse(JSON.stringify(res));
    },
  },
};
</script>

<style scoped lang='scss'>
// $img:'https://hbimg.huaban.com/564531af02c0beb6ffb0961d3537ab3f5fc7da4c734a9-xi2g7c_fw658';
$img: "https://img95.699pic.com/xsj/0v/26/4x.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast";
.big-p {
  padding: 20px;
  .top_box {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    .tag_sty {
      position: absolute;
      left: 10px;
      top: 80px;
    }
    .center_box {
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    .zljl {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 10px;
      .item {
        padding: 16px;
        border-radius: 8px;
        border: 1px solid #6389ed;
        background: #fff;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 15px;
        .info {
          padding: 8px;
          border-radius: 8px;
          background-color: rgba(181, 210, 255, 0.2);
          margin-top: 10px;
        }
      }
      .item:last-child {
        margin-right: 0;
      }
    }
  }
  .c_box {
    .box_item {
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 15px;
      .box_title {
        color: #000;
        font-size: 16px;
      }
      .box_main {
        height: 220px;
      }
    }
    .box_item_c {
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 15px;
      background-image: url("../../assets/p_rtlzt.jpg");
      // background-image: url($img);
      background-size: cover; /* 背景图片覆盖整个元素 */
      background-repeat: no-repeat; /* 背景图片不重复 */
      background-position: center; /* 背景图片居中 */
      .main_info_box {
        padding: 10px 8px;
        border: 1px solid #a0bbff;
        color: #2a62f4;
        width: 140px;
        text-align: center;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 400;
        background-color: #fff;
      }
      .main_info_box2 {
        padding: 10px 8px;
        border: 1px solid #ff9b68;
        text-align: center;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        height: 65px;
        background: linear-gradient(180deg, #ffe2b6 16.87%, #fff 119.67%);
        background-color: #fff;
      }
      .valt {
        color: #000;
        font-size: 16px;
      }
    }
  }
  .title {
    padding: 10px 0;
    color: #000;
    font-size: 20px;
  }
}
.dpib {
  display: inline-block;
}
.vat {
  vertical-align: top;
}
.fz20 {
  font-size: 20px;
}
.fw700 {
  font-weight: 700;
}

.mr20 {
  margin-right: 20px;
}
.mr10 {
  margin-right: 10px;
}
.mr5 {
  margin-right: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mb2 {
  margin-bottom: 2px;
}
.mb10 {
  margin-bottom: 10px;
}
.ml10 {
  margin-left: 10px;
}
.ml5 {
  margin-left: 5px;
}
.flr {
  float: right;
}
.fll {
  float: left;
}
p {
  margin: 0;
  padding: 0;
}
.singe-line {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
.w100 {
  width: 100%;
}
.flex_div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.l_zwf {
  display: inline-block;
  width: 5px;
  height: 16px;
  background: #2a62f4;
  vertical-align: middle;
  margin: 0 5px;
}
</style>